<template>
	<view class="task-card">
		<view class="status">
			<uni-icons fontFamily="iconfont" @tap="updateStatus({finishStatus:1,endDateTime:getNowTime()})" v-if="cardInfo.finishStatus===0" :size="24" color="#626262">{{'\ue741'}}</uni-icons>
			<uni-icons fontFamily="iconfont" @tap="updateStatus({finishStatus:0,endDateTime:null})" v-if="cardInfo.finishStatus===1" :size="24"
				:color="finishStatusDisabled?'#ccc':'var(--theme-color)'">{{'\ue712'}}</uni-icons>
		</view>
		<view class="main-info" @click="$emit('open-detail')">
			<view :class="{
				title:true,
				'through-line':cardInfo.finishStatus
			}">{{cardInfo.taskContent}}</view>
			<view class="settings">
				<view class="step setting-item" v-if="taskSteps.length">
					{{`第${taskSteps.filter(item=>item.finishStatus).length}步，共${taskSteps.length}步`}}
				</view>
				<view class="expired-time setting-item" v-if="cardInfo.deadTime">
					<uni-icons fontFamily="iconfont" :size="12" color="#777">{{'\ue7d5'}}</uni-icons>
					<view :class="{
						'desc-text':'true',
						'warning-text':isOverTime(cardInfo.deadTime),
						'acvite-text':isTodayUndo(cardInfo.deadTime),
					}">{{dateSimpleTxt(cardInfo.deadTime)}}</view>
				</view>
				<view class="repeat setting-item" v-if="cardInfo.repeatCircle">
					<uni-icons fontFamily="iconfont" :size="12" color="#777">{{'\ue60b'}}</uni-icons>
				</view>
				<view class="remind setting-item" v-if="cardInfo.noticeDateTime">
					<uni-icons fontFamily="iconfont" :size="12" color="#777">{{'\ue668'}}</uni-icons>
				</view>
				<view class="files setting-item" v-if="cardInfo.fileData">
					<uni-icons fontFamily="iconfont" :size="12" color="#777">{{'\ue6a9'}}</uni-icons>
				</view>
				<view class="note setting-item" v-if="cardInfo.note">
					<uni-icons fontFamily="iconfont" :size="10" color="#777">{{'\ue64b'}}</uni-icons>
				</view>

			</view>
		</view>
		<view class="fromName" v-if="cardInfo.fromName">
			来自：{{cardInfo.fromName}}
		</view>
		<view class="store">

			<uni-icons fontFamily="iconfont" @tap="update({flag:1})" v-if="cardInfo.flag===0" :size="20" color="#626262">{{'\ue624'}}</uni-icons>
			<uni-icons fontFamily="iconfont" @tap="update({flag:0})" v-if="cardInfo.flag===1" :size="20" color="var(--theme-color)">{{'\ue60a'}}</uni-icons>
		</view>
		<uni-popup ref="finishConfirm" type="dialog">
			<uni-popup-dialog type="warning" cancelText="关闭" confirmText="确认" content="分派任务完成后状态不可修改,确认完成吗？" @confirm="finishTask" @close="$refs.finishConfirm.close()"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import request from '@/common/request'
	import { dateSimpleTxt } from '@/utils/taskList'
	import { getNowTime } from '@/utils/taskList'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	import { mapMutations } from 'vuex'
	import dayjs from 'dayjs'
	export default {
		props: {
			cardInfo: {
				type: Object,
				default: () => ({})
			},
			groupBy: {
				type: String,
				default: ''
			}
		},
		components: {
			uniPopupDialog
		},
		methods: {
			...mapMutations('taskStore', ['updateTaskItem']),
			dateSimpleTxt,
			dayjs,
			getNowTime,
			update(props) {
				const { taskId } = this.cardInfo
				this.updateTaskItem({
					taskId,
					props
				})

			},
			isOverTime(time) {
				return dayjs().diff(dayjs(time), 'days') > 1
			},
			isTodayUndo(time) {
				const isToday = dayjs().startOf('day').isSame(dayjs(time).startOf('day'), 'day')
				return isToday
			},
			finishTask() {
				this.update({ finishStatus: 1, endDateTime: getNowTime() })
			},
			updateStatus(props) {
				if (this.groupBy === 'tome') {
					if (this.cardInfo.finishStatus === 1) {
						return
					} else {
						this.$refs.finishConfirm.open()
					}

				} else {
					this.update(props)
				}
			}
		},
		computed: {
			taskSteps() {
				return this.cardInfo.steps.filter(item => !item.deleted)
			},
			finishStatusDisabled() {
				return this.cardInfo.finishStatus === 1 && this.groupBy === 'tome'
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/static/iconfont/iconfont.css";

	.task-card {
		width: 100%;
		padding: 12upx 18upx;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		border-radius: 8upx;
		background-color: #fff;
		min-height: 108upx;
		.fromName{
			color: #444;
			font-size: 18upx;
			margin-right: 24upx;
		}

		.main-info {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			margin-right: 60upx;
			margin-left: 24upx;

			.title {
				word-break: break-all;
				margin-bottom: 8upx;
				color: #444;
				font-size: 28upx;

			}

			.settings {
				display: flex;
				color: #777;
				font-size: 20upx;
				align-items: center;

				.setting-item {
					display: flex;
					align-items: center;

					&:not(:first-child) {
						margin-left: 8upx;
					}

					.desc-text {
						margin-left: 12upx;

						&.warning-text {
							color: #ad0000;
						}

						&.acvite-text {
							color: #2979ff
						}
					}

				}
			}
		}
	}
</style>